<template>
  <div class="model-rate">
    <div class="model-rate-main">
      <!-- 模型稳定性 -->
      <div class="model-stable">
        <div class="model-stable-top">
          <div class="top-title">模型稳定性</div>
          <div class="top-result">
            <div>
              <span class="text">考核要求：</span>
              <span class="num">{{ state.invlkeIns?.standard }}%</span>
            </div>
            <div>
              <span class="text">考核结果：</span>
              <span :class="['num', state.invlkeIns.khResult == '合格' ? 'green' : 'red']">{{
                state.invlkeIns.khResult
              }}</span>
            </div>
          </div>
        </div>
        <div class="model-stable-bottom">
          <div class="stable-bottom-item">
            <span>累计调用次数：</span>
            <span class="num">{{ state.invlkeIns.tnum || '0' }}</span>
            <span>次</span>
          </div>
          <div class="stable-bottom-item">
            <span>成功调用次数：</span>
            <span>{{ state.invlkeIns.snum || '0' }}</span>
            <span>次</span>
          </div>
          <div class="stable-bottom-item">
            <span>失败调用次数：</span>
            <span>{{ state.invlkeIns.fnum || '0' }}</span>
            <span>次</span>
          </div>
          <div class="stable-bottom-item">
            <span>成功率：</span>
            <span class="num blue">{{ state.invlkeIns.success }}%</span>
          </div>
        </div>
      </div>
      <!-- 模型计算效率 -->
      <div class="model-stable">
        <div class="model-stable-top">
          <div class="top-title">模型计算效率</div>
          <div class="top-result">
            <div>
              <span class="text">考核要求：</span>
              <span class="num">{{ state.takeTimeIns.standard }}s</span>
            </div>
            <div>
              <span class="text">考核结果：</span>
              <span :class="['num', state.takeTimeIns.khResult == '合格' ? 'green' : 'red']">{{
                state.takeTimeIns.khResult
              }}</span>
            </div>
          </div>
        </div>
        <div class="model-stable-bottom">
          <div class="stable-bottom-item">
            <span>成功调用次数：</span>
            <span class="num">{{ state.takeTimeIns.snum || '0' }}</span>
            <span>次</span>
          </div>
          <div class="stable-bottom-item">
            <span>最大耗时：</span>
            <span>{{
              state.takeTimeIns.maxTime ? Number(state.takeTimeIns.maxTime).toFixed(2) : '0'
            }}</span>
            <span>s</span>
          </div>
          <div class="stable-bottom-item">
            <span>最小耗时：</span>
            <span>{{
              state.takeTimeIns.minTime ? Number(state.takeTimeIns.minTime).toFixed(2) : '0'
            }}</span>
            <span>s</span>
          </div>
          <div class="stable-bottom-item">
            <span>平均每次耗时：</span>
            <span class="num blue">{{ state.takeTimeIns.tkTimeAvg }}</span>
            <span>s</span>
          </div>
        </div>
      </div>
      <!-- 模型精准度 -->
      <!-- <div class="model-stable">
        <div class="model-stable-top">
          <div class="top-title">模型精准度</div>
          <div class="top-result">
            <div>
              <span class="text">考核要求：</span>
              <span class="num">0.91</span>
            </div>
            <div>
              <span class="text">考核结果：</span>
              <span class="num green">合格</span>
            </div>
          </div>
        </div>
        <div class="model-stable-bottom">
          <div class="stable-bottom-item">
            <span>参与降雨场次：</span>
            <span class="num blue">130</span>
            <span>场</span>
          </div>
          <div class="stable-bottom-item">
            <span>参与断面数：</span>
            <span>63</span>
            <span>个</span>
          </div>
          <div class="stable-bottom-item">
            <span>平均确定性系数：</span>
            <span class="num blue">0.92</span>
          </div>
        </div>
      </div> -->
      <!-- 模型综合平分 -->
      <div class="model-score">
        <div class="top-title">模型综合评分</div>
        <div class="model-score-bottom">
          <div class="score-stars">
            <!-- <el-rate v-model="state.sorce" clearable /> -->
            <span class="score-stars-item"></span>
            <span class="score-stars-item"></span>
            <span class="score-stars-item"></span>
            <span class="score-stars-item"></span>
          </div>
          <div class="score-bottom-right">
            <span class="score-right">评分</span>
            <span class="num">{{ state.sorce }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
//接口
import { getModelScoring, modelRatingScore } from '@/services/modules/model-exam'
//bus
import emitter from '@/utils/bus'
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const state = reactive({
  formEmit: {},
  invlkeIns: {},
  takeTimeIns: {},
  sorce: ''
})
//初始化数据
function initData(data) {
  getModelScoring({ ...data }).then((res) => {
    if (res.code === 200) {
      state.takeTimeIns = res.data.takeTimeIns
      state.sorce = res.data.sorce
      state.invlkeIns = res.data.invlkeIns
      console.log(res.data, '评分')
    }
  })
}
onMounted(() => {
  // initData()
  // searchDataValue(state.formEmit)
})
onUnmounted(() => {
  // emitter.off('searchData', searchDataValue)
})
const searchDataValue = (val) => {
  state.formEmit = val
  modelRatingScore(val).then((res) => {
    if (res.code === 200) {
      state.takeTimeIns = res.data.takeTimeIns
      state.sorce = res.data.sorce
      state.invlkeIns = res.data.invlkeIns
    }
  })
}
watch(
  () => {
    props.data
  },
  () => {
    searchDataValue(props.data)
  },
  {
    deep: true,
    immediate: true
  }
)
emitter.on('searchData', searchDataValue)
</script>

<style lang="less" scoped>
.model-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .blue {
    color: #0054db;
  }

  .green {
    color: #70b603;
  }
  .red {
    color: red;
  }
  .num {
    font-weight: 600;
    font-size: 20px;
  }
  // 每一个模型类别的第一行

  .model-rate-main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    width: 1200px;
    .model-stable {
      .model-stable-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-title {
          font-weight: 600;
        }
        .top-result {
          display: flex;
          justify-content: space-between;
          width: 300px;
        }
      }
      .model-stable-bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 40px;
        .stable-bottom-item {
          width: 280px;
          height: 20px;
          margin-left: 20px;
        }
      }
    }
    .model-score {
      .top-title {
        font-weight: 600;
      }
      .model-score-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0 0 0 100px;
        .score-stars {
          display: flex;
          .score-stars-item {
            height: 35px;
            width: 40px;
            margin-left: 10px;
            background: url('@/assets/images/modelExam/u47.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .score-bottom-right {
          .score-right {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
